import React from 'react';
import { Row, Button, Icon } from 'antd';
import cn from 'classnames';
import styles from '../../homepage.less';

const Declare = ({ onClear, addModule, saveModule }) => (
    <Row>
        <div className={cn(styles.space_between)}>
            <Button
                style={{
                    marginRight: '10px',
                    color: '#FFA22D',
                    borderColor: '#FFA22D'
                }}
                onClick={addModule}
            >
                <Icon type="plus" style={{ fontSize: 18, transform: 'translateY(1px)' }} />
                添加更多模块
            </Button>
            <div style={{ color: '#666666' }}>
                拖动模块，可调整模块位置；并支持根据使用习惯添加或删除需要的应用模块！
            </div>
            <div>
                <Button onClick={onClear} style={{ marginRight: '10px' }}>
                    取消
                </Button>
                <Button type="primary" onClick={saveModule}>
                    保存
                </Button>
            </div>
        </div>
    </Row>
);
export default Declare;
